<template>
    <div class="main">
        <div>
            <nav-bar :show-back="true" title="消息详情"/>
        </div>
        <div class="head_div">
            <img src="../../img/ticket.png" class="head_img">
            <span class="head_text">优惠券</span>
        </div>
        <div class="foot_div">
            <div class="foot">
                <span class="foot_left">使用规则</span>
                <span class="foot_right">{{message.rule}}</span>
            </div>
            <div>
                <span class="foot_left">使用时间</span>
                <span class="foot_right">{{message.useTime}}</span>
            </div>
        </div>
        <div class="botton_div">
            <yd-button-group>
                <yd-button size="large" bgcolor="rgb(88, 155, 205)" color="#fff">领取</yd-button>
            </yd-button-group>
        </div>
    </div>
</template>
<script>
import NavBar from '../../components/navbar/NavBar.vue'
export default {
    name: 'MessageCoupon',
    components: {
        NavBar
    },
    props: {
        message: {
            type: Object
        }
    }
}
</script>
<style scoped>
.main{background-color: #fff; height: 100%; width: 100%;}
.head_div{text-align: center; margin-top: 5%}
.head_img{width: .6rem; height: .6rem;position: relative;top: .14rem}
.head_text{font-size: 140%;}
.foot_div{margin-left: 10%; margin-top: 15%}
.foot{height: .8rem;}
.foot_left{font-size: 130%; color: gray; display: inline-block; width: 36%}
.foot_right{font-size: 130%; color: #000000c2; display: inline-block;width: 50%;text-align: right}
.botton_div{ margin-top: 1.5rem}
</style>
